<template>
  <div class="profile-page">
    <el-card class="profile-card">
      <div class="profile-header">
        <el-upload
          class="avatar-uploader"
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleAvatarChange"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><User /></el-icon>
        </el-upload>
        <div class="profile-info">
          <el-form :model="form" label-width="70px" class="profile-form" @submit.prevent>
            <el-form-item label="姓名">
              <el-input v-model="form.realName" maxlength="20" />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickName" maxlength="20" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveProfile">保存信息</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <el-card class="password-card">
      <div class="password-title">修改登录密码</div>
      <el-form :model="pwdForm" label-width="90px" class="password-form" @submit.prevent>
        <el-form-item label="手机号">
          <el-input v-model="pwdForm.phone" maxlength="11" disabled>
            <template #prepend>
              <el-select v-model="pwdForm.countryCode" disabled style="width: 100px;">
                <el-option
                  v-for="item in countryCodeOptions"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="pwdForm.code" maxlength="6" style="width: 160px; margin-right: 8px;" />
          <el-button :disabled="countdown > 0" @click="sendCode">
            {{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
          </el-button>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="pwdForm.newPwd" type="password" maxlength="20" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changePassword">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import { useAuthStore } from '@/store/auth'

const auth = useAuthStore()
const form = ref({
  avatar: '',
  realName: '张三',
  nickName: '小三'
})

// 国际区号选项
const countryCodeOptions = [
  { label: '中国 (+86)', value: '+86' },
  { label: '美国 (+1)', value: '+1' },
  { label: '日本 (+81)', value: '+81' },
  { label: '韩国 (+82)', value: '+82' },
  { label: '新加坡 (+65)', value: '+65' },
  { label: '马来西亚 (+60)', value: '+60' },
  { label: '泰国 (+66)', value: '+66' },
  { label: '印度 (+91)', value: '+91' },
  { label: '英国 (+44)', value: '+44' },
  { label: '德国 (+49)', value: '+49' },
  { label: '法国 (+33)', value: '+33' },
  { label: '澳大利亚 (+61)', value: '+61' },
  { label: '加拿大 (+1)', value: '+1' }
]

// 初始化表单数据
onMounted(() => {
  // 从当前用户信息初始化表单
  if (auth.user) {
    form.value.realName = auth.user.name
    form.value.avatar = auth.user.avatar
    // 如果有昵称信息，也可以从用户信息中获取
  }
  
  // 初始化密码修改表单的手机号和区号
  pwdForm.value.phone = '13800138000'
  pwdForm.value.countryCode = '+86'
})

function handleAvatarChange(file: any) {
  // mock上传，直接本地预览
  const reader = new FileReader()
  reader.onload = e => {
    form.value.avatar = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

function saveProfile() {
  if (!form.value.realName) return ElMessage.warning('请输入姓名')
  if (!form.value.nickName) return ElMessage.warning('请输入昵称')
  
  // 直接更新store和localStorage
  if (auth.user) {
    auth.user.name = form.value.realName
    auth.user.avatar = form.value.avatar
    localStorage.setItem('userInfo', JSON.stringify(auth.user))
  }
  
  ElMessage.success('个人信息已保存')
}

// 密码修改相关
const pwdForm = ref({
  phone: '13800138000',
  countryCode: '+86',
  code: '',
  newPwd: ''
})
const countdown = ref(0)
let timer: any = null

function sendCode() {
  ElMessage.success('验证码已发送（mock：123456）')
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) clearInterval(timer)
  }, 1000)
}

function changePassword() {
  if (!pwdForm.value.code) return ElMessage.warning('请输入验证码')
  if (pwdForm.value.code !== '123456') return ElMessage.warning('验证码错误')
  if (!pwdForm.value.newPwd || pwdForm.value.newPwd.length < 8 || pwdForm.value.newPwd.length > 16) return ElMessage.warning('密码长度需为8-16位')
  // 密码强度校验：必须包含大小写字母和数字，8-16位
  if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(pwdForm.value.newPwd)) {
    return ElMessage.warning('密码需为8-16位且包含大小写字母和数字的组合')
  }
  ElMessage.success('密码修改成功（mock）')
  pwdForm.value.code = ''
  pwdForm.value.newPwd = ''
}


</script>

<style scoped>
.profile-page { max-width: 520px; margin: 32px auto; }
.profile-card, .password-card { margin-bottom: 24px; }
.profile-header { display: flex; align-items: flex-start; }
.avatar-uploader { margin-right: 32px; }
.avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }
.avatar-uploader-icon { font-size: 64px; color: #bbb; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f5f5f5; }
.profile-info { flex: 1; }
.profile-form { margin-top: 8px; }
.password-title { font-size: 16px; font-weight: 500; margin-bottom: 16px; }
.password-form { max-width: 360px; }
.form-tip { font-size: 12px; color: #909399; margin-top: 4px; }
</style> 